<%--
  Created by IntelliJ IDEA.
  User: 15119
  Date: 2018-10-15
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <html>
    <head>
    <title>Title</title>

</head>


<div class="title_right">
    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
        <div class="input-group">

            <input type="text" class="form-control" placeholder="采购编号/供应商..." id="showhide" @change="sele()"  v-model="testval">
            <span class="input-group-btn">
                      <button class="btn btn-default" type="button" v-bind:style = "styleobj">Go!</button>
        </span>
    </div>
    </div>
</div>
<div id="exlist">

<div>
    <input type="button" id="selAll"  class="btn btn-primary" value="全选">
    <button  style="margin-left:10px;" class="btn btn-info" @click="ssd">确认发出</button>
</div>
    <table class="table table-hover">
    <tr>
        <td>审核</td>
        <td>供应商名称</td>
        <td>请购单号</td>
        <td>采购清单号</td>

        <td>物料名称</td>
        <td>规格</td>
        <td>颜色</td>
        <td>色号</td>
        <td>清单状态</td>
        <td>采购数量</td>



        <td>单价</td>

        <td>金额</td>
    </tr>
    <tbody>
    <template  v-for=" bb in lists">
<tr>
        <td v-if="bb.buystate==2"><input type='checkbox' class='checkbox' :value="bb.buyerid"  v-model="checkedNames"></td>
        <td v-else-if="bb.buystate==3">√</td>
        <td>{{bb.supname}}</td>
        <td>{{bb.purcode}}</td>
        <td>{{bb.buycode}}</td>

        <td>{{bb.supinfoname}}</td>
        <td>{{bb.supmodels}}</td>
    <td>{{bb.tinctname}}</td>
    <td>{{bb.tinctcolor}}</td>
        <td v-if="bb.buystate==2" style="color:red;">未发出</td>
        <td v-else-if="bb.buystate==3" style="color:lightseagreen;">已发出</td>
    <td>{{bb.buynum}}</td>
        <td>{{bb.buymoney}}</td>
        <td>{{bb.buyallmoney}}</td>
</tr>
    </template>

    </tbody>

</table>
</div>
<div id="fenye">
    <button class='btn btn-info btn-sm' @click='shang(1,1)' style="font-weight:bold;margin-left:500px;font-family: 楷体;font-size:15px;"type="button">上一页</button>
    {{currentPage}}/{{MaxPage}}
    <button class='btn btn-info btn-sm' @click='xia(1,1)' style="font-weight:bold;font-family: 楷体;font-size:15px;"type="button">下一页</button>

    <span style="font-family:楷体;font-size:20px;">总{{MaxPage}}页</span>
</div>
</body>
</html>
<script src="${pageContext.request.contextPath}/js/Vue.js"></script>
<script src="${pageContext.request.contextPath}/js/vue-resource.min.js"></script>
<script>

    var showhide = new Vue({
        el: '#showhide',
        data: {
            testval:'',
        }, methods:{
            sele:function() {
                load.fenye(1,this.testval);
    }        }

        })

   $(function(){
       load.fenye(1,"c");

   })
   Vue.use(VueResource);
   var load= new Vue({
       el:"#exlist",
       data:{
           lists:"",
           checkedNames:[],
       },
       methods:{
           fenye: function (pageNum,buycode){

               var url = "/buyer/getAll"; //   前面要加/

               this.$http.post(url,{buycode:buycode,pageNum:pageNum},{emulateJSON:true}).then(function (data){//ajax请求封装

                   fan.currentPage= data.body.pageNum;
                   fan.MaxPage=data.body.pages;
                   this.lists=data.body.list;
               })
           }, ssd:function () {
               var arr=this.checkedNames;

               alert("确认入库")

              this.$http.post("/buyer/update/"+arr,{emulateJSON:true}).then()(

                       load.fenye(1,"c")
               )
           }
       },


   })



   var fan=new Vue({
       el:"#fenye",
       data:{
           currentPage:"",
           MaxPage:"",
       },
       methods:{
           shang:function(pageNum,buycode){

               if(this.currentPage-pageNum==0){
                   pageNum=1;
               }else{
                   pageNum=this.currentPage-pageNum;
               }
               load.fenye(pageNum,showhide.testval)
           },xia:function(pageNum,buycode){

               if(this.currentPage+pageNum>this.MaxPage){
                   pageNum=this.currentPage;
               }else{
                   pageNum=this.currentPage+pageNum;
               }
               load.fenye(pageNum,showhide.testval);
           }
       }
       })

$("#selAll").click(function(){
$("#exlist :checkbox").each(function(){
if($(this).prop("checked")==false){
    $(this).prop("checked",true);
}else{
    $(this).prop("checked",false);
}

})

})


</script>